<template>
  <div>
    <main>
      <el-form :model="recordForm" ref="recordFormRef" :rules="rules">
        <div class="h80">成绩记录</div>
        <div class="container">
          <div class="tips">成功的人都需要先树立一个小目标~</div>
          <!-- 目标分数 -->
          <div class="target">
            <div>
              <span class="target_title">目标总分</span>
              <el-form-item prop="mTotal">
                <el-input
                  type="text"
                  v-model.number="recordForm.mTotal"
                  @blur="BlurText($event)"
                  >100</el-input
                >
              </el-form-item>
            </div>
            <div>
              <span class="target_title">目标听力</span>
              <el-form-item prop="mTingli">
                <el-input
                  prop="mTingli"
                  @blur="BlurText($event)"
                  v-model.number="recordForm.mTingli"
                  >100</el-input
                >
              </el-form-item>
            </div>
            <div>
              <span class="target_title">目标口语</span>
              <el-form-item prop="mKouyu">
                <el-input
                  @blur="BlurText($event)"
                  v-model.number="recordForm.mKouyu"
                  >100</el-input
                >
              </el-form-item>
            </div>
            <div>
              <span class="target_title">目标朗读</span>
              <el-form-item prop="mLangdu">
                <el-input
                  @blur="BlurText($event)"
                  v-model.number="recordForm.mLangdu"
                  >100</el-input
                >
              </el-form-item>
            </div>
            <div>
              <span class="target_title">目标写作</span>
              <el-form-item prop="mXiezuo">
                <el-input
                  @blur="BlurText($event)"
                  v-model.number="recordForm.mXiezuo"
                  >100</el-input
                >
              </el-form-item>
            </div>
          </div>
          <div class="testtitle">考试类型</div>
          <el-form-item prop="radio_test">
            <el-radio v-model="recordForm.radio_test" label="1" border
              >正式考试</el-radio
            >
            <el-radio v-model="recordForm.radio_test" label="2" border
              >模拟1</el-radio
            >
            <el-radio v-model="recordForm.radio_test" label="3" border
              >模拟2</el-radio
            >
            <el-radio v-model="recordForm.radio_test" label="4" border
              >模拟3</el-radio
            >
          </el-form-item>
        </div>
        <div class="testtime">考试时间</div>
        <el-form-item>
          <el-date-picker
            type="date"
            placeholder="选择日期"
            v-model="recordForm.testDate"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <div class="testtitle upload">
            成绩单上传<span
              >(成绩单上传只用于成绩分析，不会对任何人公布)</span
            >
          </div>
          <div class="pdl20">
            <el-upload
              class="upload-demo"
              ref="upload"
              action="string"
              accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"
              list-type="picture-card"
              :before-upload="onBeforeUploadImage"
              :http-request="handleHttpRequest"
              :on-change="fileChange"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <span class="txt" ref="txt"></span>
            <!-- <Upload></Upload> -->
          </div>
        </el-form-item>
        <div class="testtitle pdl20">考试成绩</div>
        <div class="grade-list">
          <ul>
            <li>
              <el-form-item prop="kTotal">
                <el-input
                  @blur="BlurText($event)"
                  v-model.number="recordForm.kTotal"
                  >125</el-input
                >
              </el-form-item>
              <span class="bd"></span>
              <span>总分</span>
            </li>
            <li>
              <el-form-item prop="kKouyu">
                <el-input
                  @blur="BlurText($event)"
                  v-model.number="recordForm.kKouyu"
                  >125</el-input
                >
              </el-form-item>
              <span class="bd"></span>
              <span>口语</span>
            </li>
            <li>
              <el-form-item prop="kTingli">
                <el-input
                  @blur="BlurText($event)"
                  v-model.number="recordForm.kTingli"
                  >125</el-input
                >
              </el-form-item>
              <span class="bd"></span>
              <span>听力</span>
            </li>
            <li>
              <el-form-item prop="kYuedu">
                <el-input
                  @blur="BlurText($event)"
                  v-model.number="recordForm.kYuedu"
                  >125</el-input
                >
              </el-form-item>
              <span class="bd"></span>
              <span>阅读</span>
            </li>
            <li>
              <el-form-item prop="kXiezuo">
                <el-input
                  @blur="BlurText($event)"
                  v-model.number="recordForm.kXiezuo"
                  >125</el-input
                >
              </el-form-item>
              <span class="bd"></span>
              <span>写作</span>
            </li>
            <li>
              <el-form-item prop="kYufa">
                <el-input
                  @blur="BlurText($event)"
                  v-model.number="recordForm.kYufa"
                  >125</el-input
                >
              </el-form-item>
              <span class="bd"></span>
              <span>语法</span>
            </li>
            <li>
              <el-form-item prop="kLiuli">
                <el-input
                  @blur="BlurText($event)"
                  v-model.number="recordForm.kLiuli"
                  >125</el-input
                >
              </el-form-item>
              <span class="bd"></span>
              <span>流利</span>
            </li>
            <li>
              <el-form-item prop="kFayin">
                <el-input
                  @blur="BlurText($event)"
                  v-model.number="recordForm.kFayin"
                  >125</el-input
                >
              </el-form-item>
              <span class="bd"></span>
              <span>发音</span>
            </li>
            <li>
              <el-form-item prop="kPingxie">
                <el-input
                  @blur="BlurText($event)"
                  v-model.number="recordForm.kPingxie"
                  >125</el-input
                >
              </el-form-item>
              <span class="bd"></span>
              <span>拼写</span>
            </li>
            <li>
              <el-form-item prop="kCihui">
                <el-input
                  @blur="BlurText($event)"
                  v-model.number="recordForm.kCihui"
                  >125</el-input
                >
              </el-form-item>
              <span class="bd"></span>
              <span>词汇</span>
            </li>
            <li>
              <el-form-item prop="kBiaoda">
                <el-input
                  @blur="BlurText($event)"
                  v-model.number="recordForm.kBiaoda"
                  >125</el-input
                >
              </el-form-item>
              <span class="bd"></span>
              <span>表达</span>
            </li>
          </ul>
        </div>
      </el-form>
      <div @click="applyAnalysis" class="applyAnalysis">申请分析</div>
    </main>
  </div>
</template>

<script>
import api from '@/config/api'
import { sendPost } from '@/utils/http'
import { uploadFile } from '../../../utils/http'
import { uploadOSS } from '@/utils/oss'
export default {
  data () {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      imageUrl: '',
      recordForm: {
        mTotal: '', //目标总分
        mKouyu: '', //目标口语
        mTingli: '', // 目标听力
        mLangdu: '', //目标阅读
        mXiezuo: '', //目标写作
        testDate: '', // 测试日期
        kTotal: '', //考试总分
        kKouyu: '', //考试口语
        kTingli: '', //考试听力
        kYuedu: '', //考试阅读
        kXiezuo: '', //考试写作
        kYufa: '', //考试语法
        kLiuli: '', //考试流利度
        kFayin: '', //考试发音
        kPingxie: '', //考试拼写
        kCihui: '', //考试词汇
        kBiaoda: '', //考试表达
        radio_test: '1', // 测试类型
      },
      rules: {
        // 分数校验规则
        mTotal: [{ type: 'number', required: true, message: '请填大于等于0的分数', trigger: 'blur' }],
        mKouyu: [{ type: 'number', required: true, message: '请填大于等于0的分数', trigger: 'blur' }],
        mTingli: [{ type: 'number', required: true, message: '请填大于等于0的分数', trigger: 'blur' }],
        mLangdu: [{ type: 'number', required: true, message: '请填大于等于0的分数', trigger: 'blur' }],
        mXiezuo: [{ type: 'number', required: true, message: '请填大于等于0的分数', trigger: 'blur' }],
        kTotal: [{ type: 'number', required: true, message: '请填大于等于0的分数', trigger: 'blur' }],
        kKouyu: [{ type: 'number', required: true, message: '请填大于等于0的分数', trigger: 'blur' }],
        kTingli: [{ type: 'number', required: true, message: '请填大于等于0的分数', trigger: 'blur' }],
        kYuedu: [{ type: 'number', required: true, message: '请填大于等于0的分数', trigger: 'blur' }],
        kXiezuo: [{ type: 'number', required: true, message: '请填大于等于0的分数', trigger: 'blur' }],
        kYufa: [{ type: 'number', required: true, message: '请填大于等于0的分数', trigger: 'blur' }],
        kLiuli: [{ type: 'number', required: true, message: '请填大于等于0的分数', trigger: 'blur' }],
        kFayin: [{ type: 'number', required: true, message: '请填大于等于0的分数', trigger: 'blur' }],
        kPingxie: [{ type: 'number', required: true, message: '请填大于等于0的分数', trigger: 'blur' }],
        kCihui: [{ type: 'number', required: true, message: '请填大于等于0的分数', trigger: 'blur' }],
        kBiaoda: [{ type: 'number', required: true, message: '请填大于等于0的分数', trigger: 'blur' }]
      },

    }
  },
  components: {
    // Upload
  },
  methods: {
    onBeforeUploadImage (file) {
      // const isIMAGE = file.type === 'image/jpeg' || 'image/jpg' || 'image/png'
      // const isLt1M = file.size / 1024 / 1024 < 5
      // if (!isIMAGE) {
      //   this.$message.error('上传文件只能是图片格式!')
      // }
      // if (!isLt1M) {
      //   this.$message.error('上传文件大小不能超过 1MB!')
      // }
      // return isIMAGE && isLt1M
      // let _this = this
      // return new Promise((resolve, reject) => {
      //   let isLt2M = file.size / 1024 / 1024 < 10 // 判定图片大小是否小于10MB
      //   if (!isLt2M) {
      //     reject()
      //   }
      //   let image = new Image(), resultBlob = '';
      //   image.src = URL.createObjectURL(file);
      //   image.onload = () => {
      //     // 调用方法获取blob格式，方法写在下边
      //     resultBlob = _this.compressUpload(image, file);
      //     resolve(resultBlob)
      //   }
      //   image.onerror = () => {
      //     reject()
      //   }
      // })


      // return new Promise((resolve, reject) => {
      //   let isLt2M = file.size / 1024 / 1024 < 4 // 判定图片大小是否小于4MB
      //   if (isLt2M) {
      //     resolve(file)
      //   }
      //   console.log(file)
      //   // 压缩到400KB,这里的400就是要压缩的大小,可自定义
      //   imageConversion.compressAccurately(file, 800).then(res => {
      //     // console.log(res)
      //     resolve(res)
      //   })
      // })
    },
    handleHttpRequest (param) {
      console.log(param.file);
      var that = this
      const formData = new FormData()
      formData.append('file', param.file)
      let config = {
        headers: {
          'Content-type': 'multipart/form-data'
        }
      }
      // uploadFile(param.file, "IMAGE_PATH").then(res => {
      //   console.log(res);
      //   that.imageUrl = res.showUrl
      // })
      uploadOSS(param.file,"vue").then(res => {
        console.log(res);
        that.imageUrl = res
      })
    },
    fileChange (file) {
      this.$refs.upload.clearFiles() //清除文件对象
      this.logo = file.raw // 取出上传文件的对象，在其它地方也可以使用
      this.fileList = [{ name: file.name, url: file.url }] // 重新手动赋值filstList， 免得自定义上传成功了, 而fileList并没有动态改变， 这样每次都是上传一个对象
    },

    // 校验输入框数字
    BlurText (e) {
      let boolean = new RegExp(/^\+?[0-9]\d*$/).test(e.target.value)
      if (!boolean) {
        this.$msg.warning('请输入大于等于0的正整数')
        e.target.value = ''
      }
    },
    // 申请成绩分析
    applyAnalysis () {
      this.$refs.recordFormRef.validate(valid => {
        // 预校验未通过
        if (!valid) {
          return this.$msg.error('请认真检查所填数据是否完整！')
        }
        // 校验通过，发送请求
        sendPost(api.addSchoolReport, this.recordForm).then(res => {
          console.log(res.data);
          this.$router.push('AIanalysis')
          sessionStorage.setItem('mbFlag', 'true')
          sessionStorage.setItem('dataList', JSON.stringify(res.data))
        })
      })
    },


    /* 图片压缩方法-canvas压缩 */
    compressUpload (image, file) {
      let canvas = document.createElement('canvas')
      let ctx = canvas.getContext('2d')
      let initSize = image.src.length
      let { width } = image, { height } = image
      canvas.width = width
      canvas.height = height
      ctx.fillRect(0, 0, canvas.width, canvas.height)
      ctx.drawImage(image, 0, 0, width, height)

      // 进行最小压缩0.1
      let compressData = canvas.toDataURL(file.type || 'image/jpeg', 0.1)

      // 压缩后调用方法进行base64转Blob，方法写在下边
      let blobImg = this.dataURItoBlob(compressData)
      return blobImg
    },

    /* base64转Blob对象 */
    dataURItoBlob (data) {
      let byteString;
      if (data.split(',')[0].indexOf('base64') >= 0) {
        byteString = atob(data.split(',')[1])
      } else {
        byteString = unescape(data.split(',')[1])
      }
      let mimeString = data
        .split(',')[0]
        .split(':')[1]
        .split(';')[0];
      let ia = new Uint8Array(byteString.length)
      for (let i = 0; i < byteString.length; i += 1) {
        ia[i] = byteString.charCodeAt(i)
      }
      return new Blob([ia], { type: mimeString })
    }

  }
}
</script>

<style lang="less" scoped>
main {
  padding: 0 1.25rem;
  box-sizing: border-box;
  .h80 {
    height: 5rem;
    line-height: 5rem;
    border-bottom: 1px solid #eee;
    box-sizing: border-box;
    font-size: 1.25rem;
    font-weight: bold;
    color: #333333;
  }
  /deep/.el-form-item__error {
    width: 100%;
    text-align: center;
  }
  .container {
    padding: 0.4125rem 1.25rem 1.25rem;
    .tips {
      height: 4.375rem;
      line-height: 4.375rem;
      font-size: 1.25rem;
      color: #999;
    }
    .target {
      height: 8.3125rem;
      display: flex;
      :last-child {
        margin-right: 0;
      }
      div {
        width: 9.1875rem;
        background: #fff;
        border: 0.125rem solid #ff5e4e;
        border-radius: 0.1875rem;
        margin-right: 1.5rem;
        display: flex;
        flex-direction: column;
        cursor: pointer;
        span {
          height: 3.3125rem;
          line-height: 3.3125rem;
          text-align: center;
          background-color: #fff5f5;
          font-size: 1.125rem;
          font-weight: bold;
          color: #ff5e4e;
        }
        .el-input {
          border: none;
          outline: none;
          width: 100%;
          color: #333;
          font-size: 1.625rem;
          margin-top: 1.25rem;
        }
        .el-form-item {
          border: none;
          outline: none;
          width: 100%;
        }
        /deep/.el-form-item__content {
          border: none;
          outline: none;
        }
        /deep/.el-input__inner {
          outline: none;
          border: 0;
          padding: 0 2.5rem;
          text-align: center;
          font-weight: bold;
        }
      }
    }
    .testtitle {
      font-size: 1.125rem;
      color: #333;
      height: 2.5rem;
      line-height: 2.5rem;
      margin-top: 1.3125rem;
      margin-bottom: 1.2rem;
    }
    /deep/.el-radio.is-bordered.is-checked {
      border-color: #ff5e4e;
    }
    /deep/.el-radio__input.is-checked + .el-radio__label {
      color: #ff5e4e;
    }
    /deep/.el-radio__input.is-checked .el-radio__inner {
      background-color: #ff5e4e;
      border-color: #ff5e4e;
    }
    .mode {
      display: flex;
      justify-content: space-between;
      font-size: 1.125rem;
      li {
        width: 11.25rem;
        height: 3.75rem;
        text-align: center;
        line-height: 3.75rem;
        border: 1px solid #f7f7f7;
        box-sizing: border-box;
        background-color: #fff;
        cursor: pointer;
      }
    }
  }
  .upload {
    padding-left: 1.25rem;
    box-sizing: border-box;
    font-size: 1.125rem;
    color: #333;
    margin-bottom: 1.1875rem;
    span {
      color: #ff5e4e;
    }
  }
  .testtime {
    padding: 0 1.25rem;
    box-sizing: border-box;
    font-size: 1.125rem;
    color: #333;
    margin-bottom: 1.25rem;
  }
  .el-date-editor.el-input,
  .el-date-editor.el-input__inner {
    padding: 0 1.25rem;
  }
  /deep/.el-input__prefix {
    left: 1.5rem;
    transition: all 0.3s;
  }
  .pdl20 {
    padding-left: 1.25rem;
    position: relative;
    font-size: 1.125rem;
    color: #333;
    .iconfont {
      font-size: 3.75rem;
      color: #ededed;
    }
    .txt {
      position: absolute;
      left: 3.6875rem;
      top: 5.3125rem;
      color: #d9d9d9;
      font-size: 1.125rem;
    }
    /deep/.el-upload--picture-card {
      line-height: 7.8125rem;
    }
  }
  .applyAnalysis {
    width: 25rem;
    height: 3.75rem;
    line-height: 3.75rem;
    text-align: center;
    border-radius: 0.1875rem;
    background-color: #ff5e4e;
    font-size: 1.5rem;
    color: #fff;
    cursor: pointer;
    margin-bottom: 1.875rem;
    margin-left: 14.75rem;
  }
  position: relative;
}
// 成绩列表
.grade-list {
  ul {
    display: flex;
    flex-wrap: wrap;
    li {
      width: 7.5rem;
      height: 8.75rem;
      display: flex;
      flex-direction: column;
      margin: 1.25rem 0.625rem;
      text-align: center;
      color: #333;
      font-size: 1.125rem;
      border: 0.125rem solid #f7f7f7;
      padding-top: 1.875rem;
      /deep/.el-form-item__error {
        width: 100%;
        text-align: center;
        margin-top: 2.5rem;
      }
      .el-form-item {
        margin-bottom: 0;
      }
      .el-input {
        outline: none;
        border: none;
        font-size: 1.125rem;
        color: #333;
      }
      /deep/.el-input__inner {
        padding: 0 1.875rem;
        border: none;
        text-align: center;
      }
      .bd {
        width: 2.5rem;
        height: 0.0625rem;
        background-color: #333;
        margin: 0 auto;
      }
    }
  }
}
.active {
  border: 0.125rem solid #ff5e4e !important;
  background: #fffafa !important;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #ff5e4e !important;
}
.avatar-uploader-icon {
  font-size: 1.75rem;
  color: #8c939d;
  height: 10rem;
  line-height: 10rem;
  text-align: center;
}
.avatar {
  width: 100%;
  height: 100%;
  display: block;
}
</style>
